<template>
	<view>
		<view class="box">
			<text class="zi">充值号码</text>
			<view class="box1">
				<u--input placeholder="输入202/302……" border="surround" :focus="focus" v-model="tel"
					@change="change"></u--input>
				<u-icon :name="flag==0?'edit-pen':'close-circle'" color="gray" size="28" class="edit"
					@click="edit()"></u-icon>
			</view>
		</view>
		<radio-group @change="">
			<view class="pay">
				<label class="radio" @click="changecheck(0)">
					<radio color="#1eb9ee" :checked="checkid==0?true:false" />card充值
				</label>
			</view>
			<view class="jfpin">
				<view><u--input placeholder="请输入PIN码" :disabled="checkid==1?true:false"></u--input></view>
				<u-button type="defalut" :disabled="checkid==1?true:false" size="mini" text="确定" color=" #1eb9ee"
					style="width: 30px; height: 38px;margin-left: 10px;"></u-button>
			</view>
			<view class="pay">
				<label class="radio" @click="changecheck(1)">
					<radio color="#1eb9ee" :checked="checkid==1?true:false" />WeChat Pay
				</label>
			</view>
		</radio-group>
		<view class="jf">
			<view :class="type==0&&checkid==1?'jf1 jf1check':'jf1'" @click="check2()">
				<view style="line-height: 35px;">自定义交费</view>
				<view> <u--input placeholder="5000" style="border: none;" v-model="cusmoney"
						@change="change2" :disabled="checkid!=0?false:true"></u--input></view>
			</view>
			<view class="jf2">
				<view :class="id==i&&type==1?'fei feicheck':'fei'" v-for="(item,i) in list" @click="check(i)">
					<view><text class="fei1">{{item}}</text>kip</view>
					<view>30 days</view>
				</view>
			</view>
		</view>

		<view class="box2">
			<u-button type="defalut" :disabled="flag2==0&&checkid==1?false:true" text="立即支付" @click="pay()"
				color=" #014099" style="margin-top: 30px;"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "", //用来判断选中的那个价钱
				type: 0, //判断是自定义还是选择的金钱
				tel: '',
				flag: 0,
				focus: false,
				list: ["5,000", "10,000", "20,000", "50,000", "100,000", "200,000"],
				jine: "",
				cusmoney: '',
				flag2: 1,
				checkid: 1, //判断选择pin码 还是交费


			}
		},
		onLoad() {
			 if( uni.getStorageSync("token")!=''){
				 this.tel= uni.getStorageSync("etlSim");
			 }
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
			change2(e) {
				console.log(e);
				if (e != "") {
					this.flag2 = 0;
				} else {
					this.flag2 = 1;
				}
			},
			edit() {
				this.focus = true;
				if (this.flag == 1) {
					this.tel = "";
					this.flag = 0;
				} else {
					this.flag = 1;
				}
			},
			check(i) {
				if(this.checkid==0){
					return
				}
				this.type = 1;
				this.id = i;
				this.flag2 = 0;
			},
			check2() {
				this.type = 0;
				this.flag2 = 1;
			},
			changecheck(i) {
				this.checkid = i;
				console.log(this.checkid);
				if(i == 0){
					this.id = "";
					this.type = 0;
				}
			},
			pay() {
				var qian = 0;
				if (this.type == 0) {
					if (this.cusmoney == "") {}
					qian = this.cusmoney;
				} else {
					qian = this.list[this.id];
				}
				uni.showToast({
					title: qian,
					duration: 2000
				});
			}

		}
	}
</script>

<style>
	.box {
		/* border: 1px red solid; */
	}

	.zi {
		font-size: 18px;
		font-weight: 600;
		color: #014099;
		line-height: 40px;
		padding-left: 10px;
	}

	.box1 {
		padding-left: 10px;
		width: 90%;
		position: relative;
		padding-bottom: 20px;
	}

	.edit {
		position: absolute;
		right: 5px;
		top: 7px;
	}

	.pay {
		padding-bottom: 10px;
	}

	.jfpin {
		display: flex;
		justify-content: space-around;
		width: 90%;
		border-radius: 5px;
		margin-left: 10px;
		font-size: 18px;
	}

	.jf1 {
		display: flex;
		justify-content: space-around;
		border: 1px gray solid;
		width: 90%;
		border-radius: 5px;
		margin-left: 10px;
		font-size: 18px;
	}

	.jf1check {
		border: 1px #016fb6 solid;
	}


	.jf2 {
		display: flex;
		justify-content: space-between;
		width: 90%;
		border-radius: 5px;
		margin-left: 10px;
		flex-wrap: wrap;
	}

	.feicheck {
		border: 1px #016fb6 solid !important;
		background-color: rgba(0, 0, 255, .1);

	}

	.fei {
		border: 1px lightgray solid;
		border-radius: 5px;
		width: 30%;
		font-size: 14px;
		margin-top: 20px;
		text-align: center;
		height: 50px;
		padding-top: 10px;
	}

	.fei1 {
		font-size: 16px;
	}

	.pay {
		padding-left: 10px;
		margin-top: 20px;
	}

	.box2 {
		width: 70%;
		margin: 0 auto;
	}
</style>